<template>
  <el-card class="gateway-card">
    <div class="gateway-card__container">
      <div class="gateway-card__header" slot="header">
        <div class="gateway-card__header__title">{{ title }}</div>
        <div class="gateway-card__header__link" @click="handleClick">更多...</div>
      </div>
      <div class="gateway-card__content">
        <el-tabs
          v-if="noticeSubTypes.length > 0"
          v-model="activeName"
          @tab-click="handleTabClick"
          class="gateway-card__tabs"
        >
          <el-tab-pane v-for="tab in noticeSubTypes" :key="tab.itemId" :label="tab.itemLabel" :name="tab.itemLabel"></el-tab-pane>
        </el-tabs>
        <ul class="gateway-card__content__list" v-if="noticeSubTypes.length === 0">
          <li v-for="(item, index) in list" :key="index" :span="8"
            @click="handleItemClick(item)">
            <div class="gateway-card__content__item">
              <div class="gateway-card__content__item__title">{{ item.noticeTitle }}</div>
            </div>
          </li>
        </ul>
        <ul class="gateway-card__content__list tight"  v-else>
          <li v-for="(item, index) in list.slice(0,9)" :key="index" :span="8"
              @click="handleItemClick(item)">
            <div class="gateway-card__content__item">
              <div class="gateway-card__content__item__title">{{ item.noticeTitle }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<script>
import {listNoticeWithSubType} from '@/api/system/notice'

export default {
  name: 'GatewayCard',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    noticeType: {
      type: String,
      default: ''
    },
    noticeSubTypes: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    // 创建监听器并获取取消函数
    // 客户要求只需要在首页显示tab即可，不要激活
    // const unwatch = this.$watch('noticeSubTypes', (newVal, oldVal) => {
    //   if (newVal.length > 0)  {
    //     this.activeName = newVal[0].itemLabel
    //     console.log('newVal',newVal)
    //
    //     const noticeSubType = newVal[0].itemId
    //     const query = {
    //       pageNum: 1,
    //       pageSize: 9,
    //       noticeTitle: undefined,
    //       createBy: undefined,
    //       status: undefined,
    //       sortField: 'createTime',
    //       sortOrder: 'desc',
    //       noticeSubType
    //     }
    //
    //     listNoticeWithSubType(query).then(res => {
    //       this.renderList = res.rows
    //     })
    //
    //   }
    //   // 执行完后立即取消监听
    //   unwatch()
    // })
  },
  data() {
    return {
      // 版本号
      version: '3.8.9',
      noticeList: [],
      loading: true,
      activeName: '',
      renderList: []
    }
  },
  methods: {
    handleTabClick(tab,event) {
      const {index} = tab
      const type = this.noticeSubTypes[index]
      const noticeSubType = type.itemId
      const noticeType = this.noticeType

      // 1. 解析路由地址
      const routeUrl =  this.$router.resolve({
        path: '/gateway-list',
        query: {
          noticeType,
          noticeSubType
        }
      })

      // this.$router.push({
      //   path: '/gateway-list',
      //   query: {
      //     noticeType,
      //     noticeSubType
      //   }
      // })

      // 2. 在新窗口打开
      window.open(routeUrl.href, '_blank')

      // 不显示激活状态
      this.$nextTick(() => {
        this.activeName = ''
      })

      // 不在首页做切换,
      // const query = {
      //   pageNum: 1,
      //   pageSize: 9,
      //   noticeTitle: undefined,
      //   createBy: undefined,
      //   status: undefined,
      //   sortField: 'createTime',
      //   sortOrder: 'desc',
      //   noticeSubType
      // }
      //
      // listNoticeWithSubType(query).then(res => {
      //   this.renderList = res.rows
      // })
    },
    handleClick() {
      if (this.noticeType === '') {
        return
      }
      this.$router.push({
        path: '/gateway-list',
        query: {
          noticeType: this.noticeType,
        }
      })
    },
    handleItemClick(item) {
      if (item.noticeId === undefined) {
        return
      }
      this.$router.push({
        path: '/gateway-details',
        query: {
          noticeId: item.noticeId,
        }
      })
  }}
}

</script>

<style lang="scss">
.gateway-card__tabs {

  .el-tabs__item {

    padding: 0 10px;
    font-size: 12px;

    line-height: 32px;
    height: 32px;

    &.is-active,
    &:hover {
      color: #afdd56
    }

  }

  .el-tabs__header {
    margin:  0;
  }



  .el-tabs__active-bar {
    background: #afdd56;
  }

}
</style>

<style scoped lang="scss">
.gateway-card {
  margin-bottom: 35px;
  height: 351px;
  box-shadow: none;
  border: none;
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    border-bottom: #afdd56  2px solid;

    &__title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      padding: 0 0 5px 10px;
    }

    &__link {
      font-size: 12px;
      color: #afdd56;
      cursor: pointer;
    }
  }



  &__content {

    &__list {

      &.tight {
        margin-top: 4px;
      }

      list-style: none;
      padding-left: 5px;
      margin: 10px 0;
      li {
        background-image: url("~@/assets/images/arrowb.gif");
        background-repeat: no-repeat;
        background-position: 0 12px; /* 调整图片位置 */
        padding-left: 13px; /* 文本与图片之间的间距 */
      }
    }

    &__item {

      padding: 5px 0;
      margin-right: 25px;
      text-align: left;
      font-size: 12px;
      border-bottom: #999 1px dashed;

      &__title {
        font-size: 12px;
        color: #333;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

          &:hover {
          cursor: pointer;
          text-decoration: underline;
          color: #afdd56;
        }

      }
    }
  }
}
</style>

